import React from 'react';
import { observer } from "mobx-react";
import D3Tree from '../../common/tree/RectTree';
import NodeForm from './NodeForm';
import { WeaBrowser,WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import DynamicPathTree from './DynamicPathTree';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class PathTreeSwitch extends React.Component {
    getShowname = (d) => {
        return `${d.name}`;
    }

    render() {

        const { store } = this.props;
        const { readonly } = store;
        if (store.pathType === 1) {
            return (
                [<D3Tree
                    data={toJS(store.versionNode)}
                    onClick={store.openNode}
                    showRight={store.showRight}
                    renderRight={<NodeForm store={store} />}

                    layout={store.layout}
                    style={{ height: 'calc(100% - 32px)', top: 50 }}
                    scale={store.scale}
                    zoom={this.zoom}
                    ref={ref => this.d3Tree = ref}
                    showMenu={true}
                    onDelete={readonly || this.deleteNode}
                    onAddChild={readonly || this.addChildren}
                    onDeleteChild={readonly || this.deleteChildren}

                    showname={this.getShowname}
                    desc="hreflinkName"
                >
                </D3Tree>,
                <WeaBrowser
                    ref={ref => this.browser = ref}
                    isSingle={false}
                    type={17}
                    customized={true}
                    onChange={this.addNodes}
                    icon="icon-coms02-Data-center"
                    iconBgcolor="#1a57a0"
                    title={getLabel(502284,"添加下级")}
                    memorise={true}
                    replaceDatas={store.childOpreator.slice()}
                    value={store.childOpreator.map(d => d.id).join(',')}

                />]
            )
        } else if (store.pathType === 2) {
            return (
                <DynamicPathTree store={store}></DynamicPathTree>
            )
        } else {
            return null;
        }

    }
    addChildren = () => {
        const { store } = this.props;
        const { nodeForm } = store;
        store.allChildOpreator(nodeForm.id).then((childOpreator) => {
            store.setChildOpreator(childOpreator);
            if (this.browser) {
                this.browser.openModal();
                const selectPerson = (ids, names, objs) => {
                    if (objs.length > 99) {
                        message.warn('下级节点不能超过99个');
                        this.browser.openModal();
                        return;
                    }
                    const { store } = this.props;
                    const oldids = childOpreator.map(d => d.id);
                    const newids = objs.filter(d => oldids.indexOf(d.id) === -1).map(d => d.id);
                    if (newids.length === 0) {
                        message.warn('请选择需要添加的人员');
                        return;
                    }
                    store.addNodes(nodeForm.id, newids.join(','));
                }
                this.selectPerson = selectPerson;
            }
        });
    }
    addNodes = (ids, names, objs) => {
        this.selectPerson(ids, names, objs);
    }
}